import React from 'react';
import ScrollableTabView from 'react-native-scrollable-tab-view';

import ApprovePage from './../pages/ApprovePage';
import ChartPage from './../pages/ChartPage';
import NotificationPage from './../pages/NotificationPage';
import MyPage from './../pages/MyPage';

import MyTabBar from './MyTabBar';

import {
    View,
    Text,
    TouchableOpacity
} from 'react-native';

/**
 * renderTabBar：渲染Tab视图的顶部标题栏
 */
export default class MainPageTab extends React.Component {

    constructor(props) {
        super(props);

        ///要隐藏页面的下标
        const hideTabIndexSet = new Set();
        hideTabIndexSet.add(0);

        this.state = {
            activeIndex: 0,
            hideTabIndexSet: hideTabIndexSet,
        }
    }

    render() {
        let initialPage = 0;
        return (
            <View style={{ flex: 1 }}>
                <View style={{ backgroundColor: "#6a91f8" }} />
                <ScrollableTabView
                    initialPage={initialPage}   //初始化页面的下标，从0开始
                    tabBarPosition={"bottom"}
                    tabBarBackgroundColor={"#fff"}
                    tabBarActiveTextColor={"#6a91f8"}
                    tabBarInactiveTextColor={"#7b7b7b"}
                    locked={true}   //true表示不允许滑动
                    renderTabBar={() => {
                        //渲染自定的TabBar
                        return (<MyTabBar hideTabIndexSet={this.state.hideTabIndexSet}>
                        </MyTabBar>)
                    }}
                    onChangeTab={(tab) => {
                        //alert("activeIndex:" + tab.i);
                        this.setState({ activeIndex: tab.i });
                    }}>
                    <ApprovePage tabLabel="审批"></ApprovePage>
                    <ChartPage tabLabel="报表"></ChartPage>
                    <NotificationPage tabLabel="消息"></NotificationPage>
                    <MyPage tabLabel="我的"></MyPage>
                </ScrollableTabView>
            </View>
        );
    }
}